<template>
	<view class="pageview">
		<cl-navbar :title="chatInfo.nickname" leftIconSize="40rpx" autoBack
			rightIcon='https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng6a348fc3035d99b1c6214a0cc49b4755f7d7e7dec55965d3d221043e586b7b2c'
			placeholder @rightClick="godetails">
		</cl-navbar>
		<view class="listview">
			<u-list height="100%" :scrollTop="scrollTop" scrollWithAnimation id="scroll-view">
				<view id="scroll-view-content">
					<u-list-item v-for="(item, index) in indexList" :key="index" class="message">
						<!-- 时间显示 判断是不是第一条消息并且两天消息的间隔是不是大于5分钟 -->
						<view
							v-if="index === 0 || (index !== 0 && compareTimeInterval(item.create_time,indexList[index - 1].create_time))"
							class="listview__timeview">
							<text class="listview__timeview__time">{{formatSendTime(item.create_time)}}</text>
						</view>
						<view class="message__item" :class="isMe(item.receiver_id) ? 'right' : 'left'">
							<cl-avatar
								src="https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9b98a67903b7f040709506d4cc6b81c2d0af27b34bdf7ce8a5b31b916b0bf9db"
								size="80rpx"></cl-avatar>

							<u-tooltip ref="tooltip" overlay :showCopy="false" :buttons="extendBottons"
								@click="extendClick">
								<view class="content">
									<cl-chat-img-video :imgList="mediaAttachments(item)"
										style="margin-bottom: 15rpx;"></cl-chat-img-video>
									<view v-for="(attachment, arrindex) in item.msg_attachments" :key="arrindex">
										<view v-if="attachment.Text">
											<rich-text :nodes="messageText(attachment.Text)"
												:selectable="false"></rich-text>
										</view>
									</view>
								</view>
							</u-tooltip>
						</view>
					</u-list-item>
				</view>
			</u-list>
		</view>
		<view style="background-color: #0c0d1a;">
			<!-- <view placeholder="请输入内容" contenteditable="true" > </view> -->
			<!-- <u-input placeholder="asdasda" :adjustPosition="false"></u-input> -->
			<cl-chat-input @change="changeIn" @record="record" @dibu="rollBottom"></cl-chat-input>
		</view>

		<!-- <u-tooltip ref="tooltip" overlay :showCopy="false" :buttons="extendBottons" @click="extendClick">
		</u-tooltip> -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import {
		replaceEmojis
	} from '@/components/cl-chat-input/o-emoji/emoji.js';
	import { formatSendTime } from '@/common/chatMsgTime.js'

	export default {
		data() {
			return {
				extendBottons: [{
					text: '复制',
					img: 'https://cdn.uviewui.com/uview/album/1.jpg',
				}, {
					text: '安装',
					img: 'https://cdn.uviewui.com/uview/album/1.jpg',
				}, {
					text: '转发',
					img: 'https://cdn.uviewui.com/uview/album/1.jpg',
				}, {
					text: '复制',
					img: 'https://cdn.uviewui.com/uview/album/1.jpg',
				}, {
					text: '安装',
					img: 'https://cdn.uviewui.com/uview/album/1.jpg',
				}, {
					text: '转发',
					img: 'https://cdn.uviewui.com/uview/album/1.jpg',
				}, {
					text: '复制',
					img: 'https://cdn.uviewui.com/uview/album/1.jpg',
				}, {
					text: '安装',
					img: 'https://cdn.uviewui.com/uview/album/1.jpg',
				}, {
					text: '转发',
					img: 'https://cdn.uviewui.com/uview/album/1.jpg',
				}],
				chatInfo: {
					uuid: 123,
					nickname: '今天你要嫁给我'
				},
				indexList: [],
				scrollTop: 0,
				scrollViewHeight: 0
			};
		},
		computed: {
			...mapState({
				user_info: state => state.user.user_info,
			}),
			isMe() {
				return (uuid) => {
					if (uuid == this.user_info.user_id) return true
					return false
				}
			},
			messageText() {
				return (text) => {
					return replaceEmojis(text)
				}
			},
			mediaAttachments() {
				return (item) => {
					return item.msg_attachments.filter(a => a.IMAGe || a.Video);
				}

			}
		},
		onLoad() {
			this.loadmore()
		},
		methods: {
			formatSendTime,
			//消息排序
			// sortedAttachments(message) {
			//   return message.msg_attachments.sort((a, b) => a.Order - b.Order);
			// },
			loadmore() {
				setTimeout(() => {
					this.indexList = [{
						chat_type: 0,
						msg_id: 1231313554,
						sender_id: 1999999999999999999,
						receiver_id: 1,
						create_time: 1714965210000,
						msg_attachments: [{
								IMAGe: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100
								},
								Order: 1
							},
							{
								Text: "我是消息[微笑],测试,[微笑][喜极而泣]",
								Order: 3
							},
						],
					}, {
						chat_type: 0,
						msg_id: 1231313554,
						sender_id: 1999999999999999999,
						receiver_id: 1213,
						create_time: 1714965210000,
						msg_attachments: [{
								IMAGe: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100
								},
								Order: 1
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 2
							},
							{
								Text: "我是消息[微笑],测试,[微笑][喜极而泣]",
								Order: 3
							},
						],
					}, {
						chat_type: 0,
						msg_id: 1231313555,
						sender_id: 1999999999999999999,
						receiver_id: 234,
						create_time: 1715228010000,
						msg_attachments: [{
							Text: "你好,我是[微笑]李四,今天我吃了很[微笑]多好动画系，但是[微笑]我想带你吃一些，你想[微笑]吃什么，我带给你，麻辣[微笑]烫?可以吗[微笑]?",
							Order: 1
						}],
					}, {
						chat_type: 0,
						msg_id: 1231313557,
						sender_id: 1999999999999999999,
						receiver_id: 1,
						create_time: 1715242950000,
						msg_attachments: [{
								IMAGe: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100
								},
								Order: 1
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 2
							}, {
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 2
							},
							{
								Text: "我是消息[微笑],测试,[微笑][喜极而泣]",
								Order: 3
							},
						],
					}, {
						chat_type: 0,
						msg_id: 1232313554,
						sender_id: 1999999999999999999,
						receiver_id: 1,
						create_time: 1714965210001,
						msg_attachments: [{
								IMAGe: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100
								},
								Order: 1
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 2
							}, {
								IMAGe: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100
								},
								Order: 3
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 4
							},
							{
								Text: "我是消息[微笑],测试,[微笑][喜极而泣]",
								Order: 3
							},
						],
					}, {
						chat_type: 0,
						msg_id: 1232313554,
						sender_id: 1999999999999999999,
						receiver_id: 1,
						create_time: 1714965210001,
						msg_attachments: [{
								IMAGe: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100
								},
								Order: 1
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 2
							}, {
								IMAGe: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100
								},
								Order: 3
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 4
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 5
							},
							{
								Text: "我是消息[微笑],测试,[微笑][喜极而泣]",
								Order: 3
							},
						],
					}, {
						chat_type: 0,
						msg_id: 1232313554,
						sender_id: 1999999999999999999,
						receiver_id: 123,
						create_time: 1714965210001,
						msg_attachments: [{
								IMAGe: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100
								},
								Order: 1
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 2
							}, {
								IMAGe: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100
								},
								Order: 3
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 4
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 5
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 6
							},
							{
								Text: "我是消息[微笑],测试,[微笑][喜极而泣]",
								Order: 3
							},
						],
					}, {
						chat_type: 0,
						msg_id: 1,
						sender_id: 1999999999999999999,
						receiver_id: 1,
						create_time: 1715242410000,
						msg_attachments: [{
								IMAGe: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100
								},
								Order: 1
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 2
							}, {
								IMAGe: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100
								},
								Order: 3
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 4
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 5
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 6
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 7
							},
							{
								Text: "我是消息[微笑],测试,[微笑][喜极而泣]",
								Order: 3
							},
						],
					}, {
						chat_type: 0,
						msg_id: 1231313556,
						sender_id: 1999999999999999999,
						receiver_id: 1213123,
						create_time: 1715242410000,
						msg_attachments: [{
								IMAGe: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100
								},
								Order: 1
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 2
							}, {
								IMAGe: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100
								},
								Order: 3
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 4
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 5
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 6
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 7
							}, {
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 8
							},
							{
								Text: "我是消息[微笑],测试,[微笑][喜极而泣]",
								Order: 3
							},
						],
					}, {
						chat_type: 0,
						msg_id: 1,
						sender_id: 1999999999999999999,
						receiver_id: 1,
						create_time: 1715242410000,
						msg_attachments: [{
								IMAGe: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100
								},
								Order: 1
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 2
							}, {
								IMAGe: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100
								},
								Order: 3
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 4
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 5
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 6
							},
							{
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 7
							}, {
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 8
							}, {
								Video: {
									url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									thumb_url: 'https://cdn.uviewui.com/uview/album/1.jpg',
									width: 100,
									height: 100,
									duration: 20
								},
								Order: 9
							},
							{
								Text: "我是消息[微笑],测试,[微笑][喜极而泣]",
								Order: 3
							},
						],
					}]

					this.rollBottom()
				}, 100)
			},
			//判断两个时间差是否大于5分钟
			compareTimeInterval(t1, t2) {
				return t1 - t2 >= 300000 ? true : false;
			},
			rollBottom() {
				this.$nextTick(() => {
					setTimeout(() => {
						if (!this.scrollTop) this.scrollTop = 10000000;
						this.scrollTop += 1;
					}, 100)
				})
			},
			//点击去详情
			godetails() {
				this.$Router.push({
					name: 'group_chat_details'
				})
			},
			//扩展按钮点击
			extendClick(e) {
				console.log(e);
			},
			//音频
			record(e) {
				console.log(e);
			},
			//视频选择回调
			getAlbum(data) {
				console.log(data);
				// 处理图片和视频
				let attachments = [];
				data.images.forEach((item) => {
					const [url, thumb_url] = item.split(',');

					if (url.endsWith('.mp4')) {
						// 视频处理
						attachments.push({
							Video: {
								url: url,
								thumb_url: thumb_url,
								width: 100,
								height: 100,
								duration: 20 // 假设视频时长为20秒
							},
							Order: attachments.length + 2
						});
					} else {
						// 图片处理
						attachments.push({
							IMAGe: {
								url: url,
								thumb_url: thumb_url, // 假设图片的缩略图与原图相同
								width: 100,
								height: 100
							},
							Order: attachments.length + 2
						});
					}
				});
				this.indexList.push({
					chat_type: 0,
					msg_id: 1,
					sender_id: 1999999999999999999,
					receiver_id: 1,
					create_time: 1715242410000,
					msg_attachments: [{
							Text: data.text,
							Order: 1
						},
						...attachments
					]
				})
				this.rollBottom()
			},
			//发送
			changeIn({
				text,
				html,
				length
			}) {
				let n_msg = {
					chat_type: 0,
					msg_id: 1,
					sender_id: 1999999999999999999,
					receiver_id: 1,
					create_time: 1715242410000,
					msg_attachments: [{
						Text: text,
						Order: 1
					}, ]
				}
				this.indexList.push(n_msg)
				
				
				// let chatpb = require("@/common/proto/chat_pb.js")
				
				
				
				// const protoObj = new chatpb.PrivateChatMsg()
				// protoObj.setChatType(0)
				// protoObj.setMsgId('s12341233213')
				// protoObj.setSenderId('s12341233213')
				
				// const protoData = protoObj.serializeBinary()//加密
				
				// // var formData = new FormData();
				// // formData.append('message', protoData);
				
				// this.$api.chat.PrivateMsgSend({message:protoData})
				
				// this.rollBottom()
			}
		}
	};
</script>

<style scoped lang="scss">
	.pageview {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.listview {
			flex: 1;
			overflow: hidden;

			&__timeview {
				display: flex;
				justify-content: center;
				padding: 0 0 20rpx;

				&__time {
					font-size: 20rpx;
					color: #5B5A63;
					line-height: 28rpx;
				}
			}

			.message {
				padding: 20rpx 20rpx;

				&__item {
					display: flex;
					justify-content: flex-start;
					align-items: flex-start;
					align-content: flex-start;
					flex-wrap: nowrap;
					flex-direction: row;

					.content {
						padding: 20rpx;
						max-width: 530rpx;
						border-radius: 20rpx;
						font-size: 28rpx;
						background: #1E1F30;
					}

					&.right {
						flex-direction: row-reverse;

						.content {
							margin-right: 20rpx;
							word-break: break-all;
							line-height: 36rpx;
							position: relative;
						}
					}

					&.left {
						.content {
							margin-left: 20rpx;
							word-break: break-all;
							line-height: 36rpx;
							position: relative;
						}
					}
				}
			}
		}
	}
</style>